<template>
  <el-dialog
    class="skus-product-container"
    title="设置商品规格"
    :visible="skusDialogShow"
    width="80%"
    center
    top="0vh"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="btnClose"
  >
    <div class="center">
      <el-form ref="skusForm" :model="skusFormData" :rules="skusFormRules" label-width="100px">
        <el-form-item label="规格类型">
          <el-radio-group v-model="skusFormData.sku_type">
            <el-radio :label="0" border size="medium">单规格</el-radio>
            <el-radio :label="1" border size="medium">多规格</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 单规格 -->
        <div v-if="skusFormData.sku_type === 0" class="one">
          <el-form-item label="市场价格" prop="sku_value.oprice">
            <el-input v-model="skusFormData.sku_value.oprice" size="small" :min="0" type="number">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销售价格" prop="sku_value.pprice">
            <el-input v-model="skusFormData.sku_value.pprice" size="small" :min="0" type="number">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="成本价格" prop="sku_value.cprice">
            <el-input v-model="skusFormData.sku_value.cprice" size="small" :min="0" type="number">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="sku_value.weight">
            <el-input v-model="skusFormData.sku_value.weight" size="small" :min="0" type="number">
              <template slot="append">千克</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品体积" prop="sku_value.volume">
            <el-input v-model="skusFormData.sku_value.volume" size="small" :min="0" type="number">
              <template slot="append">立方米</template>
            </el-input>
          </el-form-item>
        </div>
        <!-- 多规格 -->
        <div v-else class="more">
          <el-row class="more-wrap">
            <el-col class="skus-wrap">
              <!-- 规格容器 -->
              <el-form-item label="添加规格">
                <div v-if="skusList.length >= 1">
                  <el-col v-for="item in skusList" :key="item.id" class="more-item">
                    <el-row class="item-header" type="flex" justify="space-between" align="middle">
                      <!-- 头部左侧 -->
                      <el-input v-model="item.name" size="small">
                        <el-button slot="append" icon="el-icon-more-outline" @click="skuSelectBtn" />
                      </el-input>
                      <!-- 头部右侧 -->
                      <el-row type="flex" align="middle">
                        <el-button icon="el-icon-bottom" type="text" />
                        <el-button icon="el-icon-top" type="text" />
                        <el-button icon="el-icon-delete" type="text" />
                      </el-row>
                    </el-row>
                    <!-- skustag组件 -->
                    <div class="tag-wrap">
                      <GoodsSkusTag :add-tag-show.sync="addTagShow" @blurFn="blurFn" @deleteTagBtn="deleteTagBtn" />
                    </div>
                  </el-col>
                </div>

              </el-form-item>
              <!-- 添加规格按钮 -->
              <el-button class="skus-add" type="success" size="mini" @click="addGoodsSkus">添加规格</el-button>
            </el-col>
            <el-col class="tabel">
              <el-form-item label="规格设置">
                <el-table :data="skusFormData.goodsSkus" style="width: 100%">
                  <el-row type="flex">
                    <el-col>
                      <el-table-column fixed="left" label="商品规格">
                        <el-table-column label="后端开发" />
                        <el-table-column label="后端开发" />
                      </el-table-column>
                    </el-col>
                    <el-col>
                      <el-table-column label="销售价" width="100px">
                        <template slot-scope="{row}">
                          <el-input v-model="row.pprice" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>
                      <el-table-column label="市场价">
                        <template slot-scope="{row}">
                          <el-input v-model="row.oprice" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>

                      <el-table-column label="成本价">
                        <template slot-scope="{row}">
                          <el-input v-model="row.cprice" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>

                      <el-table-column label="库存">
                        <template slot-scope="{row}">
                          <el-input v-model="row.stock" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>
                      <el-table-column label="体积">
                        <template slot-scope="{row}">
                          <el-input v-model="row.volume" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>
                      <el-table-column label="重量">
                        <template slot-scope="{row}">
                          <el-input v-model="row.weight" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>
                    <el-col>
                      <el-table-column label="编码">
                        <template slot-scope="{row}">
                          <el-input v-model="row.code" type="number" />
                        </template>
                      </el-table-column>
                    </el-col>

                  </el-row>

                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="btnOk">确 定</el-button>
        <el-button size="small" @click="btnClose">取 消</el-button>
      </span>
    </div>

    <!-- 规格弹层 -->
    <SkusSelect />

  </el-dialog>
</template>

<script>
import { getGoodsSkus, addGoodsSkus } from '@/api/goods'
import SkusSelect from './skus-select.vue'
export default {
  name: 'SkusProduct',
  components: {
    SkusSelect
  },
  props: {
    skusDialogShow: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    const validate = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('价格不能为负'))
      } else {
        callback()
      }
    }
    return {
      skusFormData: {
        sku_type: 0,
        sku_value: {
          oprice: 0,
          pprice: 0,
          cprice: 0,
          weight: 0,
          volume: 0
        },
        goodsSkus: [
          {
            skus: [
              {
                goods_skus_card_id: null,
                name: '',
                order: 50,
                value: '',
                id: null,
                text: ''
              }
            ],
            image: null,
            pprice: null,
            oprice: null,
            cprice: null,
            stock: null,
            volume: null,
            weight: null,
            code: null,
            goods_id: null
          }
          // ...
        ]
      },
      skusFormRules: {
        sku_value: {
          oprice: [
            { validator: validate, trigger: 'blur' }
          ],
          pprice: [
            { validator: validate, trigger: 'blur' }
          ],
          cprice: [
            { validator: validate, trigger: 'blur' }
          ],
          weight: [
            { validator: validate, trigger: 'blur' }
          ],
          volume: [
            { validator: validate, trigger: 'blur' }
          ]
        }
      },
      skusList: [],
      addTagShow: true, // 控制tag按钮
      skuSelectShow: false // 规格选择弹层
    }
  },
  watch: {
    id: {
      handler(val) {
        this.getGoodsSkusList()
      }
    }
  },
  methods: {
    // 获取规格列表
    async getGoodsSkusList() {
      this.goodsInfo = await getGoodsSkus(this.id)
    },
    // tag输入框
    blurFn() {

    },
    // 移除tag
    deleteTagBtn() {

    },
    // 新增规格
    async addGoodsSkus() {
      try {
        const result = await addGoodsSkus({
          goods_id: this.id,
          name: '规格名称',
          order: 50,
          type: 0
        })
        this.skusList.push(result)
      } catch (error) {
        console.log(error)
      }
    },
    // 规格选择弹层
    skuSelectBtn() {
      this.skuSelectShow = true
    },
    // 弹层确定取消按钮
    btnClose() {
      this.$emit('update:skusDialogShow', false)
    },
    btnOk() {
      // 表单校验
      this.$refs.skusForm.validate(isOk => {
        try {
          if (isOk) {
            this.$message.success('修改商品规格成功')
            this.btnClose()
          }
        } catch (error) {
          this.$message.error('修改商品规格失败')
          console.log(error)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.skus-product-container {
  ::v-deep .el-dialog {
    height: 100vh;

    .el-dialog__body {
      display: flex;
      justify-content: center;
    }
  }

  .one {
    .el-form-item {
      width: 450px;
    }

    .el-input {
      width: 100%;
    }
  }

  .more {
    .more-wrap {
      .el-row {
        padding-left: 12px;
      }
    }

    .el-form-item {
      margin: 0;
    }

    .more-item {
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      margin-bottom: 10px;

      .tag-wrap{
        padding: 14px 12px;
      }
    }

    ::v-deep .el-button {
      display: flex;
      justify-content: center;
    }

    .item-header {
      background-color: rgb(243, 244, 246);
      height: 48px;

      .el-input {
        width: 200px;
        height: 30px;
      }

      ::v-deep .el-button {
        width: 40px;
      }
    }

    .item-center {
      padding-top: 8px;
      padding-bottom: 8px;

      .tag-item {
        height: 28px;

        ::v-deep .el-input {
          width: 128px;
          height: 22px !important;
        }

        ::v-deep .el-button {
          width: 40px;
        }

        ::v-deep .el-input-group__append {
          background-color: unset;
        }
      }

      .tag-add {
        .el-button {
          padding: 5px 10px;
        }
      }
    }

    .skus-wrap {
      margin-bottom: 10px;

      .skus-add {
        transform: translate(100px);
      }
    }
  }
}
</style>
